// 左侧菜单组件
<template>
  <div class="wrap">
    <div class="card"></div>
    <div :class="menuClass1" @click="onClick(0)">
      <img class="icon" src="../assets/icon.png" />移动端
    </div>

    <!-- 子菜单 -->
    <div v-if="currentIndex == 0">
      <div
        v-for="(item, index) in menus"
        :key="item"
        :class="['child-menu', currentChildIndex==index?'child-menu-active':'']"
        @click="onChildClick(index)"
      >{{ item }}</div>
    </div>

    <div :class="['item', currentIndex == 1? 'item-active':'']" @click="onClick(1)">
      <img class="icon" src="../assets/icon.png" />前端
    </div>
    <div :class="['item', currentIndex == 2? 'item-active':'']" @click="onClick(2)">
      <img class="icon" src="../assets/icon.png" />物联网
    </div>
    <div :class="['item', currentIndex == 3? 'item-active':'']" @click="onClick(3)">
      <img class="icon" src="../assets/icon.png" />服务端
    </div>
  </div>
</template>

<script>
export default {
  name: "left-menu",
  data() {
    return {
      currentIndex: 0, // 父菜单控制变量
      currentChildIndex: 0, // 子菜单控制变量
      menus: ["听写", "朗读", "阅读", "写作", "诗歌"]
    };
  },
  created() {
    // 通过location.hash判断当前地址，然后选中对应的菜单
    // if (location.hash == "#tab0") {
    //   this.currentIndex = 0;
    // } else if (location.hash == "#tab1") {
    //   this.currentIndex = 1;
    // } else if (location.hash == "#tab2") {
    //   this.currentIndex = 2;
    // } else if (location.hash == "#tab3") {
    //   this.currentIndex = 3;
    // }
    // this.$emit("change", this.currentIndex);
    // // 添加hash地址切换的事件监听
    // window.addEventListener("hashchange", this.hashChange);
  },
  computed: {
    menuClass1() {
      return {
        item: true,
        "item-active": this.currentIndex == 0
      };
    }
  },
  methods: {
    // 菜单点击后的回调方法
    onClick(index) {
      // 改变currentIndex的值
      this.currentIndex = index;

      // 进行路由跳转，通过path进行跳转
      // this.$router.push({ path: "/tab" + index });
      // 进行路由跳转，通过name进行跳转
      this.$router.push({ name: "tab" + index });

      // 改变hash地址
      // location.hash = "tab" + index;
      // 触发父组件的change事件，然后把currentIndex（选中的菜单项）传出去
      // this.$emit("change", this.currentIndex);
    },
    // 子菜单点击后的回调方法
    onChildClick(index) {
      // 改变currentChildIndex的值
      this.currentChildIndex = index;
    },
    // 哈希地址改变监听事件
    hashChange(e) {
      console.log(e);
      if (e.newURL.includes("#tab0")) {
        this.currentIndex = 0;
      } else if (e.newURL.includes("#tab1")) {
        this.currentIndex = 1;
      } else if (e.newURL.includes("#tab2")) {
        this.currentIndex = 2;
      } else if (e.newURL.includes("#tab3")) {
        this.currentIndex = 3;
      }
      this.$emit("change", this.currentIndex);
    }
  }
};
</script>

<style scoped>
.wrap {
  width: 250px;
  height: 100vh;
  background: #001528;
  padding-top: 20px;
  box-sizing: border-box;
}
.card {
  height: 40px;
  background: #334453;
  margin: 0 15px;
  margin-bottom: 30px;
}
.icon {
  width: 30px;
  height: 30px;
  margin-right: 20px;
}
.item {
  display: flex;
  align-items: center;
  height: 60px;
  line-height: 60px;
  flex: 1;
  color: #fff;
  padding-left: 25px;
  cursor: pointer;
}
.item-active {
  background: #1890ff;
}
.child-menu {
  height: 60px;
  line-height: 60px;
  color: #fff;
}
/* 子菜单激活的样式 */
.child-menu-active {
  color: #1890ff;
}
</style>
